<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>人才发展</title>
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入通用css -->
    <link rel="stylesheet" href="../common/public.css" />
    <!-- 引入样式vant -->
    <link rel="stylesheet" href="../common/ui/vant-ui/ui.css" />
    <script src="../common/ui/vant-ui/ui.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>
  </head>
  <body>
    <div id="app">
      <main-top></main-top>
      <div class="mainCenter">
        <div class="leftContent">
          <div class="pd20">
            <div class="flex jcsb">
              <div class="fwb ndis500"><van-icon name="arrow-left" size="20" /></div>
              <div class="dis500"></div>
              <div class="prColor">保存</div>
            </div>
            <div class="fwb fs24 mgt20">人才发展</div>
            <div class="fs14 mgt10 c8">
              介绍公司可提供的员工培养和晋升制度,良好的职业成长空间对人才更有引力
            </div>
          </div>
          <!-- 选择表单 -->
          <div v-for="(i,num) in tag" class="pd20">
            <div class="fwb fs14">{{ i.title }}</div>
            <div class="flex fww mgt10">
              <div class="" v-for="(j,index) in i.list">
                <div
                  class="tag"
                  :class="inValue(index,i.value)?'tagActive':'bn'"
                  @click="ck(num,index)"
                >
                  {{ j }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <lan-adright></lan-adright>
      </div>
      <main-footer class="bd"></main-footer>
    </div>
  </body>
</html>
<style>
  .noLimit {
    color: #999;
    font-size: 12px;
  }
  .tag {
    text-align: center;
    margin: 3px 5px;
    padding: 8px 15px;
    font-size: 13px;
    border-radius: 4px;
    background-color: #eeeeee65;
    color: black;
    border: 1px solid #fff;
  }
  .bn {
    border: 1px solid #eeeeee65;
  }
  .tagActive {
    border: 1px solid green;
    color: green;
  }
</style>
<script>
  new Vue({
    el: "#app",
    data: {
      tag: [
        {
          title: "晋升制度",
          list: ["考核晋升", "定期晋升", "完善的晋升机制"],
          value: [0],
        },
        {
          title: "人才激励",
          list: [
            "定期普调",
            "定期绩效调薪",
            "晋级涨薪",
            "项目奖金",
            "团队奖金",
            "个人奖金",
            "绩效提成",
            "股票期权",
            "人才补贴",
          ],
          value: [0],
        },
        {
          title: "牛人职位要求",
          list: [
            "老员工带新",
            "导师一对一",
            "岗前带薪培训",
            "内部定期培训",
            "专业技能培训",
            "内部课程资源",
            "大牛带队",
            "人脉积累",
            "国内外进修",
            "校招培养",
          ],
          value: [0],
        },
        {
          title: "更多信息",
          list: ["更多"],
          value: [0, 1, 2],
        },
      ],
    },
    components: {
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
      "lan-adright": httpVueLoader("../common/commpent/lan/adRight.vue"),
    },
    methods: {
      inValue(num, arr) {
        return arr.filter((i) => num == i).length == 1;
      },
      ck(num, index) {
        let flag = this.tag[num].value.indexOf(index);
        if (flag == -1) {
          this.tag[num].value.push(index);
        } else {
          this.tag[num].value.splice(flag, 1);
        }
      },
    },
  });
</script>
